<template>
  <h2 class="wow" style="visibility: visible">装修攻略</h2>
  <ul class="ul-box">
    <li class="wow" style="animation-delay: 0.4s; visibility: visible">
      <div class="img-box">
        <img
          src="https://www.shbotao.net//uploads/allimg/20240717/63536670f680047b48844ef4bb015254.jpg"
          alt=""
        />
      </div>
      <div class="text-box">
        <h3>东滩云墅 | 爆改卫生间，实用又高级</h3>
        <p>2024-07-24</p>
        <div class="more" @click="toPage('strategydetail', 1)">查看更多</div>
      </div>
    </li>
  </ul>
  <div class="pagination-box wow" style="visibility: visible">
    <el-pagination
      class="wow"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="prev, pager, next"
      :total="total"
      @current-change="handlePageChange"
    >
    </el-pagination>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100) // 数据总条数
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
// 页码改变时的处理函数
const handlePageChange = (newPage) => {
  currentPage.value = newPage
  // 这里可以调用获取数据的方法，传入新的页码
}
import { useRouter } from 'vue-router'
const router = useRouter()
const toPage = (page, id) => {
  let data = {
    name: page
  }
  if (id) {
    data.query = { id: id }
  }
  router.push(data).then(() => {
    window.scrollTo({
      top: 0
    })
  })
}
</script>

<style>
html .strategy-list h2 {
  opacity: 0;
  animation: slide-up-in 1s, fade-in 1s;
  animation-fill-mode: forwards;
}
.strategy-list h2 {
  text-align: center;
  font-size: 0.56rem;
  font-weight: 700;
  color: #000;
}
.strategy-list .ul-box {
  margin-top: 0.6rem;
  margin-bottom: 0.8rem;
}

.strategy-list .ul-box li:not(:last-child) {
  margin-bottom: 0.6rem;
}

.strategy-list .ul-box li .img-box {
  position: relative;
  height: 4.38rem;
  box-shadow: 0 0.13rem 0.3rem 0 hsla(0, 0%, 63.1%, 0.35);
  border-radius: 0.2rem;
}

.strategy-list .ul-box li .img-box img:first-child {
  width: 100%;
  height: 100%;
  border-radius: 0.2rem;
}

.strategy-list .ul-box li .img-box .btn {
  width: 0.9rem;
  height: 0.9rem;
  position: absolute;
  left: 50%;
  top: 50%;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.strategy-list .ul-box li .text-box {
  padding-left: 0.28rem;
}

.strategy-list .ul-box li .text-box p {
  margin-top: 0.24rem;
  font-size: 0.22rem;
  font-weight: 400;
  color: #888;
}

.strategy-list .ul-box li .text-box h3 {
  margin-top: 0.4rem;
  font-size: 0.3rem;
  font-weight: 700;
  color: #000;
}

.strategy-list .ul-box li .text-box .more {
  display: flex;
  align-items: center;
  position: relative;
  margin-top: 0.4rem;
  font-size: 0.24rem;
  font-weight: 700;
  color: #dd292c;
  cursor: pointer;
}

.strategy-list .ul-box li .text-box .more:after {
  position: absolute;
  left: 0.95rem;
  content: '';
  margin-left: 0.1rem;
  display: inline-block;
  width: 0.1rem;
  height: 0.1rem;
  border-bottom: 0.01rem solid #dd292c;
  border-right: 0.01rem solid #dd292c;
  transform: rotate(-45deg);
  transition: all 0.3s;
}
.strategy-list .pagination-box {
  margin-top: 0.15rem;
  padding: 0 0.3rem 1rem;
}

.strategy-list .pagination-box .el-pagination {
  padding: 0;
}
</style>